<template>
  <div class="order_list">
    <title-bar :title="'我的优惠券'"/>
    <van-tabs
      sticky
      :active="activeIndex"
      :swipe-threshold="5"
      @click="handleTabClick"
      style="margin-top: 46px;"
      :offset-top="46"
    >
      <van-tab v-for="tab in tabsItem" :title="tab.name" :key="tab.type">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          :offset="100"
          @load="loadMore"
        >
          <van-cell-group v-for="(el, i) in items" class="order_list--panel" :key="i">
            <div @click="couponTo(el.rangeType,el.ccate,el.pcate,el.id)">
              <item-ecoupon :el="el"/>
            </div>
          </van-cell-group>
        </van-list>
      </van-tab>
    </van-tabs>

    <is-empty v-if="isEmpty">抱歉,没有找到符合条件的订单</is-empty>
  </div>
</template>

<script>
import { ELE_COUPON_LIST } from "@/api/order";

import { Tab, Tabs, Panel } from "vant";
import IsEmpty from "@/vue/components/is-empty/";
import loadMore from "@/vue/mixin/list-load-more";
import scrollFixed from "@/vue/mixin/scroll-fixed";
import ItemEcoupon from "@/vue/components/item-ecoupon/";
import TitleBar from "@/vue/components/title-bar/";

export default {
  name: "order-list",
  mixins: [loadMore, scrollFixed],

  props: {
    active: {
      type: [String, Number],
      default: 0
    }
  },

  computed: {},

  data() {
    const activeIndex = this.active;

    return {
      activeIndex,
      items: [],
      tabsItem: [
        {
          name: "全部"
        },
        {
          name: "待使用",
          status: 0
        },
        {
          name: "已使用",
          status: 1
        },
        {
          name: "已过期",
          status: -1
        }
      ]
    };
  },
  watch: {
    $route: "resetInit"
  },

  created() {
    this.resetInit();
  },

  methods: {
    initData() {
      const i = this.active;
      const status = this.tabsItem[i].status;
      return this.$reqGet(
        ELE_COUPON_LIST,
        {
          memberId: this.user.id,
          status,
          offset: (this.pages.currPage - 1) * this.pages.perPage,
          limit: this.pages.perPage
        },
        {
          hideLoading: true
        }
      ).then(res => {
        const { rows, total } = res.data.data;
        
        this.items.push(...rows);
        return {
          pageCount: rows.length,
          totalCount: total
        };
      });
    },
    handleTabClick(index) {
      this.$router.replace({
        name: "user-order-ele-list",
        params: {
          active: index
        }
      });
    },
    // 优惠券跳转
    couponTo(rangeType, ccate, pcate, id) {
      if (rangeType === 1 || !rangeType) {
        window.location.href = "src/views/home";
      } else if (rangeType === 3) {
        if (!ccate) {
          this.$router.push({ path: "/items/list?itemClass=" + pcate });
        } else {
          this.$router.push({ path: "/items/list?itemClass=" + ccate });
        }
      } else {
        if (rangeType === 2) {
          // this.$router.push({ path: "/items/detail" + id });
        } else {
          console.log("zxc");
        }
      }
    }
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Panel.name]: Panel,
    [IsEmpty.name]: IsEmpty,
    [ItemEcoupon.name]: ItemEcoupon,
    [TitleBar.name]: TitleBar
  }
};
</script>

<style lang="scss" scoped>
.order_list {
  padding-bottom: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
  &--footer_btn {
    text-align: right;
  }
  // &--panel {
  //   margin-bottom: 10px;
  // }

  &--van-card {
    background-color: #fafafa;
  }

  &--total {
    text-align: right;
    padding: 10px;
  }
}
// .order_list--panel{
// 	margin-bottom: 10px;
// }
</style>
